﻿@using cloudscribe.FileManager.Web.Models
@using Microsoft.Extensions.Localization
@using Microsoft.Extensions.Options
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@model BrowseModel
@inject IOptions<AutomaticUploadOptions> autoUploadOptionsAccessor
@inject IStringLocalizer<FileManagerStringResources> sr
@inject IOptions<FileManagerIcons> iconsAccessor
@{
    var upoadOptions = autoUploadOptionsAccessor.Value;
    var icons = iconsAccessor.Value;
}
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div class="img-container">
                <img id="image" src="~/cr/css/1x1.gif" alt="Picture" class="cropper-hidden" />
                <div class="cropper-container cropper-bgx" style="width: 825px; height: 469px;">
                    <div class="cropper-wrap-box">
                        <div class="cropper-canvas" style="width: 825px; height: 464.063px; transform: translateY(2.46875px);">
                            <img src="~/cr/css/1x1.gif" style="width: 825px; height: 464.063px; transform: none;" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row docs-data">
        <div class="col-md-6">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <label class="input-group-text">@sr["Crop Width"]</label>
                </div>
                <input type="text" class="form-control" id="dataWidth" disabled placeholder='@sr["width"]' />
                <div class="input-group-append">
                    <span class="input-group-text">px</span>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <label class="input-group-text">@sr["Crop Height"]</label>
                </div>
                <input type="text" class="form-control" id="dataHeight" disabled placeholder='@sr["height"]' />
                <div class="input-group-append">
                    <span class="input-group-text">px</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 docs-buttons mt-2">
            <div class="btn-group">
                <label class="btn btn-primary btn-upload" for="inputImage">
                    <input type="file" class="visually-hidden" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.tiff" />
                    @sr["Choose an image from your device"]
                </label>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title='@sr["Zoom In"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Zoom In"]" data-original-title='@sr["Zoom In"]'>
                        <span class="@icons.ZoomIn"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title='@sr["Zoom Out"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Zoom Out"]" data-original-title='@sr["Zoom Out"]'>
                        <span class="@icons.ZoomOut"></span>
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title='@sr["Move Left"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Move Left"]" data-original-title='@sr["Move Left"]'>
                        <span class="@icons.MoveLeft"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title='@sr["Move Right"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Move Right"]" data-original-title='@sr["Move Right"]'>
                        <span class="@icons.MoveRight"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title='@sr["Move Up"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Move Up"]" data-original-title='@sr["Move Up"]'>
                        <span class="@icons.MoveUp"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title='@sr["Move Down"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Move Down"]" data-original-title='@sr["Move Down"]'>
                        <span class="@icons.MoveDown"></span>
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title='@sr["Rotate Left"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Rotate Left"]" data-original-title='@sr["Rotate Left"]'>
                        <span class="@icons.RotateLeft"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title='@sr["Rotate Right"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Rotate Right"]" data-original-title='@sr["Rotate Right"]'>
                        <span class="@icons.RotateRight"></span>
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title='@sr["Flip Horizontal"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Flip Horizontal"]" data-original-title='@sr["Flip Horizontal"]'>
                        <span class="@icons.FlipHorizontal"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title='@sr["Flip Vertical"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Flip Vertical"]" data-original-title='@sr["Flip Vertical"]'>
                        <span class="@icons.FlipVertical"></span>
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="zoomTo" data-option="1">
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Zoom to 100%"]" data-original-title='@sr["Zoom to 100%"]'>
                        @sr["Zoom to 100%"]
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="reset" title='@sr["Reset"]'>
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["Reset"]" data-original-title='@sr["Reset"]'>
                        <span class="@icons.Refresh"></span>
                    </span>
                </button>
            </div>

            <div class="docs-toggles btn-group " data-bs-toggle="buttons">
                <label class="btn btn-primary active">
                    <input type="radio" class="visually-hidden" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777" />
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["aspectRatio: 16 / 9"]" data-original-title='@sr["aspectRatio: 16 / 9"]'>
                        16:9
                    </span>
                </label>
                <label class="btn btn-primary">
                    <input type="radio" class="visually-hidden" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333" />
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["aspectRatio: 4 / 3"]" data-original-title='@sr["aspectRatio: 4 / 3"]'>
                        4:3
                    </span>
                </label>
                <label class="btn btn-primary">
                    <input type="radio" class="visually-hidden" id="aspectRatio2" name="aspectRatio" value="1" />
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["aspectRatio: 1 / 1"]" data-original-title='@sr["aspectRatio: 1 / 1"]'>
                        1:1
                    </span>
                </label>
                <label class="btn btn-primary">
                    <input type="radio" class="visually-hidden" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666" />
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["aspectRatio: 2 / 3"]" data-original-title='@sr["aspectRatio: 2 / 3"]'>
                        2:3
                    </span>
                </label>
                <label class="btn btn-primary">
                    <input type="radio" class="visually-hidden" id="aspectRatio4" name="aspectRatio" value="NaN" />
                    <span class="docs-tooltip" @*data-bs-toggle="tooltip"*@ data-animation="false" title="@sr["aspectRatio: Free Form"]" data-original-title='@sr["aspectRatio: Free Form"]'>
                        Free
                    </span>
                </label>
            </div>
        </div>
    </div>

    <div class="row align-items-left mb-1 gx-2">
        <div class="col-2 w-auto align-self-center mt-1">
            <div class="input-group input-group-sm me-1">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="dataWidth">@sr["Output Width"]</label>
                </div>
                <input type="text" class="form-control" id="dataNewWidth" placeholder="output width" style="max-width:70px;" />
                <div class="input-group-append">
                    <span class="input-group-text">px</span>
                </div>
            </div>
        </div>

        <div class="col-2 w-auto align-self-center mt-1">
            <div class="input-group input-group-sm me-1">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="dataHeight">@sr["Output Height"]</label>
                </div>
                <input type="text" class="form-control" id="dataNewHeight" placeholder="output height" style="max-width:70px;" />
                <div class="input-group-append">
                    <span class="input-group-text">px</span>
                </div>
            </div>
        </div>

        <div class="col-2 w-auto align-self-center mt-1">
            <div class="input-group input-group-sm me-1">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="maxWidth">@sr["Max Width"]</label>
                </div>
                <input type="text" class="form-control" id="cropMaxWidth" style="max-width:70px;" value="@upoadOptions.WebSizeImageMaxWidth" />
            </div>
        </div>

        <div class="col-3 w-auto align-self-center mt-1">
            <div class="input-group input-group-sm me-1">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="chkContrainWidthOfCrop" checked /> @sr["Constrain Width"]
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="btn-group btn-group-crop mb-3 mt-2 docs-buttons">
        <button id="btnUploadCrop" type="button" class="btn btn-primary" data-method="getCroppedCanvas">
            @sr["Upload/Save"]
        </button>
    </div>

    <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="getCroppedCanvasTitle">@sr["Cropped Preview"]</h5>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">

                    <form id="frmUploadCropped" asp-controller="FileManager" asp-action="Upload">
                        <input type="hidden" id="cropResizeImages" name="resizeImages" value="false" />
                        <input type="hidden" id="cropCurrentDir" name="currentDir" value="" />
                        <input type="hidden" class="form-control" id="origFileName" />

                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <span class="form-control " id="cropCurrentDirLabel"></span>
                            </div>
                            <div class="col-auto">
                                <input type="text" class="form-control " id="croppedFileName" name="croppedFileName" />
                            </div>
                        </div>

                        <div class="row g-3 mt-2 align-items-center">
                            <div class="col-auto">
                                <button id="btnUploadCropped" type="submit" class="btn btn-primary me-1"><i class="@icons.Upload" aria-hidden="true"></i>&nbsp;@sr["Upload"]</button>
                            </div>
                            <div class="col-auto">
                                <a class="btn btn-primary me-1" id="btnSaveLocal" href="javascript:void(0);" download="cropped.jpg">@sr["Save Locally"]</a>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@sr["Close"]</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
